<!--组件-服务-->
<template>
  <div class="server bg2 bk2" @click="showClick()">

    <template v-if="array.length">
      <text class="font28 text2 all">{{server ? server.name : T('请选择服务器')}}</text>
      <LImage v-if="array.length" class="arrow-image" :src="config.img('xiala.png')"></LImage> 
    </template>
    <template v-else>
      <text class="font28 text2 all">{{isPrivate ? T('暂无独享服务器') : T('暂无服务器')}}</text>
      <text class="font28 text1">{{T('去购买')}}</text>
      <LImage class="arrow-image" :src="config.img('youjin.png')"></LImage>
    </template>
  </div>
</template>

<script>


//功能
import config from "@/_js/config";
import navigator from "@/_js/navigator";
import modal from "@/_js/modal";

const weexFunction = weex.requireModule('WeexFunction');
import weexHttp from "@/_js/https"; ;


import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {

  props:{
    
    isPrivate: {  //true私有服务器
      type: Boolean,
      default: false,
    }
  },

  data() {
    return {
      T:T,
      config:config,
      serverTag:'up-server-spot', //服务器缓存

      server:undefined, //选中服务器
      array:[], //服务器名称
      dict:undefined, //服务器表
    };
  },

  mounted(){

    weexFunction.getConfig(this.serverTag, (e)=>{
      this.server = e.length ? JSON.parse(e) : null;
      this.httpMyServers(false);
    });
  },

  methods:{

    initData(datas) {

      var array = [];
      this.dict = {};
      for (let index = 0; index < datas.length; index++) {
        var item = datas[index];
        if (item.serverStatus == 'ARRANGING') {
          continue;
        }

        //名称
        item.name = T(item.serverName) + '#' + (item.serverMark ? item.serverMark : item.serverCode);
        if (!this.isPrivate || item.serverType == 'PRIVATE') {
          this.dict[item.name] = item;
          array.push(item.name);
        }
      }
      this.array = array;

      //设置默认选中服务器
      var server;
      if (this.server) {
        server = this.dict[this.server.name];
        server = (server && this.server.id == server.id) ? server : null;
      }

      if(!server && this.array.length) {
        var name = this.array[0];
        server = this.dict[name];
      }
      this.serverChange(server);
    },

    //检查参数
    checkError() {
      if (this.server) {
        return false;
      }
      modal.toast(T('请选择服务器'));
      return true;
    },

    /********************************** HTTP*/
    //我的服务器列表
    httpMyServers(load) {

      load && modal.showLoad();
      var param = {};
      weexHttp.post("server/queryMyServerList",param,true,(data) => {
          load && modal.hideLoad();
          if (data.status == 200) {
            data = data.data;
            this.initData(data);
            load && this.showClick();
          } else if(load) {
            modal.toast(data.msg);
          }
        }
      );
    },
    
    /********************************** 其他*/
    //选中服务器改变
    serverChange(server) {
      this.server = server;
      var str = server ? JSON.stringify(server) : '';
      weexFunction.setConfig(this.serverTag, str,()=>{});
    },

    /********************************** 点击*/
    //显示服务器
    showClick() {
      
      //多币对无私有无服务器
      if (this.isPrivate && !this.array.length) {
        navigator.open('', "server/Server", {}, {'navColor':'#040448'});
        return;
      }


      //无服务器
      if (!this.array.length) {
        navigator.open('', "mine/Vip", {}, {'navColor':'#1677fe'});
        return;
      }

      
      var name = this.server ? this.server.name : T('公共服务器');
      modal.actionSheet(this.array, name, (value)=>{
        var server = this.dict[value];
        this.serverChange(server);
      });
    },

  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.server {
  flex-direction: row;
  align-items: center;

  height: 108px;
  border-radius: 16px;

  padding-left: 40px;
  padding-right: 40px;

  border-width: 2px;
}
.arrow-image{
  width: 20px;
  height: 20px;
  margin-left: 15px;
}

</style>
